<!-- 重点参数：iconStyle, iconLabel -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/index.html -->
    <!-- <base href="https://webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/" /> -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>车辆轨迹</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    .amap-marker-label {
        font-size: 13px;
        border: 1px solid orange;
        background: #fff;
        border-radius: 10px 0 0 0;
        color: #690441;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.14&key=bed6b3d25e1bc2d6bf27a667425ade4c'></script>
    <!-- UI组件库 1.0 -->
	<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [89.177995, 44.939548] //初始化地图中心点
    });


    //加载SimpleMarker
    AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {

        var iconTheme = 'default';

        //内置的样式
        var iconStyles = SimpleMarker.getBuiltInIconStyles(iconTheme);

		$.getJSON('./mapdata.js', function (rs) {

			var geoCoords = rs;

			for (var i = 0; i < geoCoords.length; i+=5) {
				var point = [geoCoords[i].geoCoord[0], geoCoords[i].geoCoord[1]];

				var icon = new AMap.Icon({
					size: new AMap.Size(256, 256),    // 图标尺寸
					image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3620806441,1900155477&fm=26&gp=0.jpg',  // Icon的图像
					// imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
					imageSize: new AMap.Size(60, 60)   // 根据所设置的大小拉伸或压缩图片
				});

				// 将 Icon 实例添加到 marker 上:
				var marker = new AMap.Marker({
					position: new AMap.LngLat(point[0], point[1]),
					// offset: new AMap.Pixel(-10, -10),
					icon: icon, // 添加 Icon 实例
					title: '北京',
					// zoom: 13
				});

				map.add(marker);
			}

			map.setFitView();
		});

    });

    </script>
</body>

</html>